<template>
  <div>
    <el-card class="box-card">
      <el-form :inline="true" :model="formData" class="demo-form-inline">
        <el-form-item label="工单编号">
          <el-input v-model="formData.taskCode" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="工单状态">
          <el-select v-model="formData.status" filterable placeholder="请选择">
            <el-option label="待办" value="1" />
            <el-option label="进行" value="2" />
            <el-option label="取消" value="3" />
            <el-option label="完成" value="4" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
      <el-row>
        <el-button type="warning" icon="el-icon-circle-plus-outline" @click="addRoleList">新建</el-button>
        <el-button>工单配置</el-button>
      </el-row>
      <el-table :data="roleList">
        <el-table-column label="序号" align="center" type="index" />
        <el-table-column label="工单编号" align="center" width="240" prop="taskCode" />
        <el-table-column label="设备编号" align="center" prop="innerCode" />
        <el-table-column label="工单类型" align="center" prop="taskType.typeName" />
        <el-table-column label="工单方式" align="center" prop="createType" />
        <el-table-column label="工单状态" align="center" prop="taskStatus" />
        <el-table-column label="运营人员" align="center" prop="userName" />
        <el-table-column label="创建日期" align="center" prop="updateTime" />
        <el-table-column label="操作" align="center">查看详情</el-table-column>
      </el-table>
      <el-pagination
        :current-page.sync="currentPage1"
        :page-size="10"
        layout="total,prev, pager, next, jumper"
        :total="-total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <!-- 新增工单弹窗 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogShow"
      width="40%"
      @colse="dialogColse"
    >
      <el-form ref="formLable" label-width="100px" :rules="newRules" :model="workOrder">
        <el-form-item label="设备编号: " prop="innerCode">
          <el-input v-model="workOrder.innerCode" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="工单类型: " prop="productType">
          <el-select v-model="workOrder.productType" filterable placeholder="请选择">
            <el-option label="补货工单" value="buhuo" />
          </el-select>
        </el-form-item>

        <el-form-item label="补货数量: ">
          <el-input v-model="workOrder.expectCapacity" />
        </el-form-item>
        <el-form-item label="运营人员: " prop="userId">
          <el-input v-model="workOrder.userId" placeholder="请选择" />
        </el-form-item>
        <el-form-item label="备注: " prop="desc">
          <el-input v-model="workOrder.desc" placeholder="请输入备注(不超过40字)" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogShow">取 消</el-button>
        <el-button type="primary">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getListApi } from '@/api'
export default {
  data() {
    return {
      currentPage1: 1,
      total: 0,
      formData: { // 上方搜索框
        taskCode: '',
        status: {
          1: '待办',
          2: '进行',
          3: '取消',
          4: '完成'
        }
      },
      roleList: [], // 表格列表
      dialogShow: false,
      title: '',
      workOrder: { // 新增工单
        innerCode: '',
        productType: '',
        userId: '',
        desc: '',
        details: {
          expectCapacity: ''
        }
      },
      newRules: { // 新增工单校验规则
        innerCode: [{ required: true, message: '请输入', trigger: 'change' }],
        productType: [{ required: true, message: '请选择', trigger: 'change' }],
        userId: [{ required: true, message: '请选择', trigger: 'change' }],
        desc: [{ required: true, message: '请输入', trigger: 'change' }]
      }
    }
  },
  async created() {
    this.fatchGetListApi()
  },
  methods: {
    // 查询工单状态
    onSubmit() {
      this.fatchGetListApi(this.formData)
      this.$message.success('查询工单成功')
    },
    async fatchGetListApi(val) {
      const res = await getListApi(val)
      this.roleList = res.currentPageRecords
      this.currentPage1 = res.pageIndex
      this.total = res.totalCount
      this.roleList.forEach((item) => {
        item.createType === 1 ? item.createType = '手动' : item.createType = '自动'
      })
    },
    // 新建工单
    addRoleList() {
      this.title = '新增工单'
      this.dialogShow = true
    },
    // 关闭弹窗
    dialogColse() {
      this.dialogShow = false
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
